<template>
	<u-popup :show="show" bgColor="rgba(0,0,0,0)" @close="closeMore">
		<image src="http://112.124.50.179:8888/imgs/home/popbg.png" mode="widthFix" class="popBgc"></image>
		<view class="popup_con">
			<view class="fixedTitle_oblation">
				<view class="left"></view>
				<view class="middle">敬香</view>
				<view class="right">
					<u-icon @click="closeMore" class="close" name="close" color="black" size="20"></u-icon>
				</view>
			</view>

			<view class="jingxiang">
				<view class="jingxiang_item" v-for="(item, index) in jingxiang_list" @click="jingxiang(item)">
					<image src="" mode=""></image>
					{{ item.name }}
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onReady,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import WorshipApi from '@/API/worship';
	const worshipApi = new WorshipApi();
	const {
		peopleId
	} = defineProps({
		peopleId: {
			type: String,
			required: true,
			default: ''
		}
	});
	const emits = defineEmits(['finish']);
	const jingxiang_list = ref([{
			name: '某某香'
		},
		{
			name: '某某香'
		},
		{
			name: '某某香'
		},
		{
			name: '某某香'
		}
	]);
	const show = ref(false);

	const closeMore = () => {
		show.value = false;
	};

	const jingxiang = (item) => {
		worshipApi
			.respectfulIncense({
				worshipPeopleId: peopleId,
				respectfulIncenseType: item.name
			})
			.then((res) => {
				uni.showToast({
					icon: 'none',
					title: '敬香成功'
				});
				closeMore();
				emits('finish');
			})
			.catch(() => {});
	};

	defineExpose({
		show
	});
</script>

<style lang="scss">
	::v-deep.u-popup__content {
		padding: 0 !important;
	}

	.popup_con {
		position: relative;
		background-image: url('http://112.124.50.179:8888/imgs/home/popbg.png');
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.popBgc {
		position: absolute;
		width: 100%;
		left: 0;
		top: 0;
	}

	.fixedTitle_oblation {
		width: 100%;
		font-size: 32rpx;
		color: #156778;
		padding-top: 60rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left,
		.right {
			width: 100rpx;
			flex-shrink: 0;
		}

		.right {
			display: flex;
			justify-content: flex-end;
			padding-right: 32rpx;
			box-sizing: border-box;
		}

		.middle {
			flex: 1;
			text-align: center;
		}
	}

	.close {
		width: 48rpx;
		height: 48rpx;
	}

	.jingxiang {
		width: 100%;
		padding: 20rpx 40rpx 50rpx;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-row-gap: 64rpx;

		.jingxiang_item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;

			image {
				width: 144rpx;
				height: 144rpx;
				margin-bottom: 24rpx;
				background: #f1f6f3;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
		}
	}
</style>